import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { FormattedMessage } from 'umi-plugin-react/locale';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row,Tag,Select  } from 'antd';
import styles from './index.less';
import savebuttom from '@/assets/account/robotSetup/savebuttom.png';

const SlotSelect = React.lazy(() => import('../../common/Slot/index'));
const SlotCase = React.lazy(() => import('../../common/Case/index'));
const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

@connect(({ collectSlot, loading }) => ({
  collectSlot,
  loading: loading.effects['collectSlot/fetchSlot'],
}))
class CollectSlot extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slots: [],
      dialogSlots: [],
      slotLoading: true, // 词槽加载loading
      nodeId: props.nodeId,
      stage: props.stage,
      dialogId: props.dialogId,// 多轮对话id
      selectedSlots: [],
      inquire:{
        cases:[],
        slots:[]
      }
    }
  }

  componentDidMount() {
    this.fetchSlot()
  }

  fetchSlot=()=>{
    const { dispatch } = this.props;
    const { dialogId,nodeId,stage} = this.state;
    let { inquire } = this.state;
    dispatch({
      type: 'collectSlot/fetchSlot',
      payload: {
        dialogId,nodeId,stage
      },
      callback:(res)=>{
        inquire = res.dialogStage.inquire ;
        if(!inquire){
          inquire={
            slots:[],
            cases:[]
          }
        }
        this.setState({
          dialogSlots:res.dialogSlots,
          inquire
        })
      }
    });
  };

  upDataByCallBack=(res)=>{
    const {inquire} = this.state;
    inquire.cases = res;
    this.setState({
      inquire
    })
  };

  upDateSlotsByAddSlot =(res)=>{
    const {inquire} = this.state;
    console.log(inquire);

    inquire.slots = res;
    this.setState({
      inquire
    })
  };

  upSelectedSlotData = (res)=>{
    const {inquire} = this.state;
    inquire.slots = res;
    this.setState({
      inquire
    })
  };

  upSelectedData=(arr)=>{
    const {inquire} = this.state;
    inquire.slots = arr;
    this.setState({
      inquire
    })
  };

  fixCaseArr=(arr)=>{
    const {inquire} = this.state;
    inquire.cases = arr;
    this.setState({
      inquire
    })
  };

  saveSlotInquiry = ()=>{
    const { dispatch } = this.props;
    const { dialogId,nodeId,stage,inquire} = this.state;
    console.log(inquire,'------词槽询问保存数据');
    if(inquire.slots.length ===0){
      return message.error('请先添加词槽再进行保存操作')
    }
    dispatch({
      type: 'collectSlot/saveSlot',
      payload: {
        field:'inquire',
        _id:dialogId+'-'+nodeId,
        inquire
      },
      callback:(res)=>{
        message.info('保存成功');
        this.props.closeDrawer();
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const {dialogSlots,selectedSlots,inquire} = this.state;
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
         <div className={styles.warp}>
           <Row>
             <Col xs={24}>
               <div className={styles.title}>
                 <span>要收集的词槽</span>
               </div>
             </Col>
             <SlotSelect
               slots={inquire.slots}
               selected={inquire.slots}
               dialogSlots={dialogSlots}
               upData={(val)=>this.upDateSlotsByAddSlot(val)}
               upSelected={(arr)=>this.upSelectedSlotData(arr)}
             />
             <SlotCase
               data={inquire.slots}
               caseArr={inquire.cases}
               selected={selectedSlots}
               dialogSlots={dialogSlots}
               upDateCase={(val)=>this.fixCaseArr(val)}
               upNewData={(val)=>this.upDataByCallBack(val)}
               upMewSelected={(arr)=>this.upSelectedData(arr)}
             />
           </Row>
           {/*<Button type="primary" htmlType='button' onClick={()=>this.saveSlotInquiry()} style={{marginTop:20}}>保存</Button>*/}
           <div className={styles.flexcen}>
             <img onClick={()=>this.saveSlotInquiry()} src={savebuttom} />
           </div>
         </div>

        </Suspense>
      </GridContent>
    );
  }
}

export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(CollectSlot));
